<template>
	<div class="ffffff mainpadding radius" style="width: 75%;">
		<shopping-order-list :type="0" :item="item" v-for="item in list.data"></shopping-order-list>
		<div class="flexcenter margin_top" v-if="list.total > 15">
			<el-pagination background layout="prev, pager, next" :page-size="15" :total="list.total"
				@current-change="tuijianchange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import shoppingOrderList from "./components/shoppingOrderList"
	import {good_orderlist} from "@/API/goods"
	export default{
		components:{
			shoppingOrderList
		},
		data(){
			return{
				page:1,
				list:{
					data:[]
				}
			}
		},
		mounted() {
			this.init()
		},
		methods:{
			init(page) {
				good_orderlist({
					page: page || 1,
					state:6
				}).then(res => {
					this.list = res.data.data
					this.list.data = res.data.data.data;
				})
			},
			// 推荐页码改变调用接口
			tuijianchange(val) {
				this.init(val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.noActive {
		font-size: 15px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}
	
	.active {
		font-size: 15px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #3478F5;
		position: relative;
	}
	
	.active::after {
		content: '';
		width: 22px;
		height: 2px;
		background: #3478F5;
		border-radius: 6px 6px 6px 6px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -10px;
	}
</style>